<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>哈哈哈</title>
	<script src="./vue.js"></script>
</head>
<body>
	<!-- 挂载点、模板、实例的关系 -->
	<!-- 模板可以写在标签内，也可以写在vue内template -->

	<div id='root'>
		<h1>hello,{{msg}}</h1>
		<h2>{{number}}</h2>
		<h3 v-text="number"></h3>
		<h3 v-html="content"></h3>
		<!-- 函数绑定 v-on 指令可以简写为@-->
		<div @click="handleClick">{{content_1}}</div>
	</div>

	<!-- 创建vue实例 -->
	<script>
		new Vue({
			// el代表和那个元素进行关联绑定！挂载点el对应的节点
			el:'#root',
			//template: '<h1>hello,{{msg}}</h1>',
			data: {
				msg:"sunbing!",
				number:123,
				content:"<h1>hello</h1>",
				content_1:"hello"
			},
			methods: {
				handleClick: function(){
					this.content_1 = 'word'
					
				}
			}
		})
	</script>
</body>
</html>